<template>
    <el-select v-model="selectedValue" :placeholder="placeholder" :style="{ width: width }" :clearable="clearable"
        :filterable="filterable" :remote="remote" :remote-method="handleRemoteSearch" :loading="loading"
        :disabled="disabled" @change="handleChange" @clear="handleClear" @focus="handleFocus">
        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">{{ item.label }}</el-option>
    </el-select>
</template>

<script setup name="TenantSelector">
import { getTenantList } from "@/api/fang/common"

// 定义组件属性
const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: null
    },
    placeholder: {
        type: String,
        default: "请选择租客"
    },
    width: {
        type: String,
        default: "100%"
    },
    clearable: {
        type: Boolean,
        default: true
    },
    filterable: {
        type: Boolean,
        default: true
    },
    remote: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    },
    minSearchLength: {
        type: Number,
        default: 1
    }
})

// 定义事件
const emit = defineEmits(['update:modelValue', 'change', 'clear'])

// 响应式数据
const selectedValue = ref(props.modelValue)
const options = ref([])
const loading = ref(false)
const searchKeyword = ref('')

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
    selectedValue.value = newVal
})

// 监听内部值变化
watch(selectedValue, (newVal) => {
    emit('update:modelValue', newVal)
})

// 远程搜索租客
async function handleRemoteSearch(queryString) {
    searchKeyword.value = queryString

    // 检查最小搜索长度
    if (queryString.length < props.minSearchLength) {
        options.value = []
        return
    }

    if (queryString !== '') {
        loading.value = true
        try {
            const response = await getTenantList({ searchKey: queryString })
            options.value = response.rows || []
        } catch (error) {
            console.error('搜索租客失败:', error)
            options.value = []
        } finally {
            loading.value = false
        }
    } else {
        options.value = []
    }
}

// 选择变化处理
function handleChange(value) {
    const selectedOption = options.value.find(item => item.id === value)
    emit('change', value, selectedOption)
}

// 清空处理
function handleClear() {
    emit('clear')
}

// 聚焦处理
function handleFocus() {
    // 可以添加聚焦时的逻辑
}

// 暴露方法给父组件
defineExpose({
    clear: () => {
        selectedValue.value = null
        options.value = []
        searchKeyword.value = ''
    },
    focus: () => {
        // 可以添加聚焦逻辑
    },
    getSelectedOption: () => {
        return options.value.find(item => item.id === selectedValue.value)
    }
})
</script>

<style scoped>
.tenant-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tenant-phone {
    font-size: 12px;
    color: #909399;
    margin-top: 2px;
}

/* 高亮样式 */
:deep(.el-select-dropdown__item) {
    padding: 8px 20px;
}

:deep(.el-select-dropdown__item:hover) {
    background-color: #f5f7fa;
}

:deep(.el-select-dropdown__item.selected) {
    background-color: #409eff;
    color: white;
}

:deep(.el-select-dropdown__item.selected .tenant-phone) {
    color: rgba(255, 255, 255, 0.8);
}
</style>
